<template>
	<view class="my-main-container">
		<backgroundImg/>
		<view class="my-header-container">
			<view class="my-information-box">
				<view>
					<text class="info-key">昵称：</text>
					<text class="info-value">{{userName}}</text>
				</view>
				<view>
					<text class="info-key">车牌：</text>
					<text class="info-value">{{plateNumber}}</text>
				</view>
				<view>
					<text class="info-key">分数：</text>
					<text class="info-value">{{moveCarCount}}分(满分100)</text>
				</view>
				<view>
					<text class="info-key">排名：</text>
					<text class="info-value">{{moveCarRank}}名</text>
				</view>
			</view>
			<view class="head-picture-container">
				<view class="head-picture-box">
					<image src="/static/1.jpg" class="head-picture" lazy-load mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="list-container">
			<view v-for="item in functionList" class="list-box">
				<view class="list">
					<view class="image-box">
						<image :src="item.icon" mode="aspectFit"></image>
					</view>
					<text>{{item.name}}</text>
					<!-- <image src=""></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"userName": "未登录",
				"plateNumber": "######",
				"moveCarCount": 100,
				"moveCarRank": 1000000,
				"functionList": [
					{
						"name": "设置",
						"icon": "/static/my_list/set.png"
					},
					{
						"name": "注销",
						"icon": "/static/my_list/set.png"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.my-main-container {
		position: absolute;
		width: 750rpx;
		height: 100vh;
		z-index: 1000;
	}

	.my-header-container {
		position: relative;
		display: flex;
		width: 750rpx;
		height: 25vh;
		box-sizing: border-box;
		border-bottom: 1px solid #9CA8BD;
		background-color: rgba(0, 0, 0, 0.2);

		.my-information-box {
			width: 55%;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;

			>view {
				display: flex;
				align-items: center;
				padding: 10rpx 10rpx 10rpx 40rpx;

				.info-key {
					font-size: 40rpx;
				}

				.info-value {
					font-size: 30rpx;
					color: #383838;
				}
			}
		}

		.head-picture-container {
			position: relative;
			width: 40%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.head-picture-box {
				height: 80%;
				aspect-ratio: 1/1;

				.head-picture {
					height: 100%;
					width: 100%;
					border-radius: 50%;
					object-fit: cover;
					lazy-load: true;
					background-color: red;
				}
			}
		}
	}

	.list-container {
		position: relative;
		width: 100%;
		height: 75vh;

		.list-box {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 10vh;
			box-sizing: border-box;
			border-bottom: 1rpx solid #9CA8BD;
			padding: 20rpx 20rpx 20rpx 40rpx;

			.list {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;

				.image-box {
					height: 80%;
					aspect-ratio: 1/1;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				>text {
					padding-left: 40rpx;
				}
			}
		}
	}
</style>